<script setup lang="ts">
import {reactive, watch} from "vue";
import {ref} from "vue-demi";
import {getditchapi, getditchskadminapi} from "@/api/api";
import type {ditchListDto, ditchSkAdminItemDto} from "@/api/api";
import type {FormInstance, FormRules} from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    region: '',
    region1: '',
})
const rules = reactive<FormRules>({
    region: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ],
    region1: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ],
})
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
        required: true,
    }
})
const ditchList = ref<ditchListDto[]>([])
const gatheringAccountList = ref<ditchSkAdminItemDto[]>([])
const isUp = ref(false)
const emits = defineEmits(['update:show', 'success'])
const onSubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            OnSure()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const OnSure = async () => {
    isUp.value = false
    emits('success',ruleForm)
}
const onCancel = () => {
    isUp.value = false
    emits('update:show', false)
}
// 获取渠道列表
const getDitchFn = async () => {
    ditchList.value = await getditchapi()
}
const onChangeDitch = async (val: number | string) => {
    gatheringAccountList.value = (await getditchskadminapi(val)).list
}
// 监听show
watch(() => props.show, (newVal) => {
    isUp.value = newVal
    if (newVal) {
        resetForm(ruleFormRef.value)
        getDitchFn()
        // 显示弹窗时执行的操作
    }
})
// 监听isUp
watch(isUp, (newVal) => {
    emits('update:show', newVal)
})
</script>

<template>
    <div>
        <el-dialog v-model="isUp" title="渠道账户选择" width="500">
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                status-icon
            >
                <el-form-item label="默认渠道账户" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择" @change="onChangeDitch">
                        <el-option v-for="(item,i) in ditchList" :key="i" :label="item.name" :value="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="默认收款账户" prop="region1">
                    <el-select v-model="ruleForm.region1"
                               :placeholder="ruleForm.region===''?'请先选择渠道账户':'请选择'"
                               :disabled="ruleForm.region===''">
                        <el-option v-for="(item,i) in gatheringAccountList" :key="i" :label="item.bankName"
                                   :value="item.id"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="flex items-center justify-center">
                    <el-button @click="onCancel">取消</el-button>
                    <el-button type="primary" class="bg-#0256ff" @click="onSubmitForm(ruleFormRef)">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">

</style>
